<template>
  <swiper
    ref="mySwiper"
    :options="swiperOptions"
    class="content"
    autoplay="true"
  >
    <swiper-slide  v-for="item in bannerData"
    :key="item.id">
      <img :src="item.url" alt="" @click="skip(item)"/>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import api from "../../api"
export default {
  name: "HomeSwiper",
  data() {
    return {
      url:"",
      bannerData:[],
      swiperOptions: {
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 3000, // 自动切换的时间间隔（单位ms）
        },
        loop: true, //循环播放
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  methods:{
    skip(id){
      this.$router.push(
        {
          name:'ActivePage',
          params:{
            id:id
          }
        }
      )
    }
  },
  mounted(){
    api.getBanner().then(res=>{
      // console.log(res.data.list);
      this.bannerData = res.data.list
      // console.log(this.bannerData);
      // console.log(this.bannerData[0].url);
      this.url=this.bannerData[0].url
    })
  }
};
</script>

<style scoped>
.content img {
  width: 100%;
  height: 122px;
}
</style>